<template>
  <div
      v-for="(good, index) in list" :key="index" @click="selectGood(good, index)"
      class="good"
  >
    <div style="padding: 2px;">
      <nut-image
          :src="good.imageUrl"
          width="80"
          height="80"
      />
    </div>
    <div style="width:100%;display:flex;flex-direction: column;">
      <div style="flex:1;margin-top:5px;" class="name">
        {{good.name}}
      </div>
      <div style="display:flex;">
        <span style="color: #6b6d71;background-color: rgba(0,0,0,0.03);padding:0 5px;">规格：1 * {{good.spec}}</span>
        <span class="send" style="flex:1;text-align:right;padding-right:15px;">{{ good.send }}</span>
      </div>
      <div style="display:flex;width:100%;margin-bottom:5px;margin-top:5px;">
        <nut-price :price="good.price" size="normal" />
        <div style="margin-left:5px;" v-if="good.deduction">
          返
          <nut-price :price="good.deduction" size="small" />
        </div>
        <div style="flex:1;text-align:right;padding-right:15px;">
          <span style="color:grey;" >
            <span v-if="good.qty">x </span>
          </span>
          <span style="font-size:18px;color: #1e9fff;" > {{good.qty}} </span>
          <span style="font-size:13px;color: #1e9fff;" >  {{good.unit}}</span>
          <span style="width:100px;display:inline-block;" >
            <span v-if="good.amount">
              <nut-price :price="good.amount"></nut-price>
            </span>
          </span>
        </div>

      </div>
      <div style="margin-top:5px;" v-if="good.remark">
        <nut-tag color="grey">{{good.remark}}</nut-tag>
      </div>
    </div>

  </div>
</template>
<script>

export default {
  name: "goodItem",
  props: {
    list: {type: Array, default: () => { return []}}
  },
  data () {
    return {

    }
  },
  emits: ['addCart', 'selectGood'],
  methods: {
    selectGood (good, index) {
      this.$emit('selectGood', good)
    },
    addCart () {
      this.$emit('addCart')
    }
  }
}
</script>
<style scoped lang="scss">

.swiper-container {
  padding: 5px;
  width:100%;
  background-color: #F8F8F8;
}
.good {
  margin-bottom:10px;display:flex;width:100%;
  user-select: none;
  background-color: #fff;
  &:active {
    background-color: #F8F8F8;
  }
}
.name {
  font-size: 15px;
  color: #37363b;
}
.send {
  color: #1e9fff;
  font-size: 13px;
}

.unit {
  font-size: 12px;
  color: #2c6eb2;
}
</style>